import type { LegacyRef } from 'react';
import { ColorEnum, WidthEnum } from '../common';

export interface GridOptions {
  /**
   * 列宽
   */
  column?: WidthEnum;
  /**
   * 等宽
   */
  equal?: boolean;
  /**
   * 内部单元格
   */
  celled?: 'internally';
  /**
   * 宽松
   */
  relaxed?: boolean | 'very';
  /**
   * 网格可以在第一列和最后一列保留其垂直和水平檐槽
   */
  padded?: boolean | 'horizontally' | 'vertically';
  /**
   * 文本对齐方式
   */
  textAlign?: 'left' | 'center' | 'right' | 'justified';
  /**
   * 垂直对齐方式
   */
  verticalAlign?: 'top' | 'middle' | 'bottom';
  /**
   * 居中
   */
  centered?: boolean;
  /**
   * 容器
   */
  container?: boolean;
  /**
   * 堆叠
   */
  stackable?: boolean;
  /**
   * 网格或行可以指定其列在不同设备大小下的顺序应相反
   */
  reversed?: 'computer' | 'tablet' | 'mobile' | 'computer vertically' | 'tablet vertically' | 'mobile vertically';
  /**
   * 列或行只能针对特定设备或屏幕大小显示
   */
  only?: 'large screen' | 'widescreen' | 'computer' | 'tablet' | 'mobile';
  /**
   * 转发 ref
   */
  forwardedRef?: LegacyRef<HTMLElement>;
}

export interface GridColumnOptions {
  /**
   * 宽度
   */
  wide?: WidthEnum;
  /**
   * 电脑显示宽度
   */
  computer?: WidthEnum;
  /**
   * 大屏显示宽度
   */
  largeScreen?: WidthEnum;
  /**
   * 移动显示宽度
   */
  mobile?: WidthEnum;
  /**
   * 平板显示宽度
   */
  tablet?: WidthEnum;
  /**
   * 宽屏显示宽度
   */
  widescreen?: WidthEnum;
  /**
   * 浮动
   */
  floated?: 'left' | 'right';
  /**
   * 颜色
   */
  color?: ColorEnum;
  /**
   * 文本对齐方式
   */
  textAlign?: 'left' | 'center' | 'right' | 'justified';
  /**
   * 垂直对齐方式
   */
  verticalAlign?: 'top' | 'middle' | 'bottom';
  /**
   * 列或行只能针对特定设备或屏幕大小显示
   */
  only?: 'large screen' | 'widescreen' | 'computer' | 'tablet' | 'mobile';
  /**
   * 转发 ref
   */
  forwardedRef?: LegacyRef<HTMLElement>;
}

export interface GridRowOptions {
  /**
   * 列宽
   */
  column?: WidthEnum;
  /**
   * 等宽
   */
  equal?: boolean;
  /**
   * 颜色
   */
  color?: ColorEnum;
  /**
   * 文本对齐方式
   */
  textAlign?: 'left' | 'center' | 'right' | 'justified';
  /**
   * 垂直对齐方式
   */
  verticalAlign?: 'top' | 'middle' | 'bottom';
  /**
   * 列或行只能针对特定设备或屏幕大小显示
   */
  only?: 'large screen' | 'widescreen' | 'computer' | 'tablet' | 'mobile';
  /**
   * 转发 ref
   */
  forwardedRef?: LegacyRef<HTMLElement>;
}
